<template>
    <div v-if="showAddBillForm" id="addBillFormBox" class="addBillFormBox px-2">
        <form id="addBillForm" @submit.prevent="addBill">
            <div class="row mb-2">
                <div class="col">
                    <label for="type" class="form-label">类型</label>
                    <select class="form-select" :class="{ 'is-invalid': warningNull.type }" id="type" name="type"
                        v-model="formData.type">
                        <option selected disabled>选择类型</option>
                        <option value="收入">收入</option>
                        <option value="支出">支出</option>
                    </select>
                </div>
                <div class="col">
                    <label for="date" class="form-label">日期</label>
                    <input type="date" class="form-control" :class="{ 'is-invalid': warningNull.date }" id="date"
                        name="date" v-model="formData.date">
                </div>
                <div class="col">
                    <label for="amount" class="form-label">金额</label>
                    <input type="number" class="form-control" :class="{ 'is-invalid': warningNull.amount }" min="0"
                        step="0.01" id="amount" name="amount" v-model="formData.amount">
                </div>
            </div>
            <div class="row mb-2">
                <div class="col">
                    <label for="resume" class="form-label">描述</label>
                    <textarea class="mb-2 form-control" :class="{ 'is-invalid': warningNull.resume }" id="statement"
                        name="statement" rows="2" v-model="formData.resume"></textarea>
                    <button type="submit" class="btn btn-success col-12">添加</button>
                </div>
                <div class="col">
                    <label for="description" class="form-label">备注</label>
                    <textarea class="form-control" id="notes" name="notes" rows="4"
                        v-model="formData.description"></textarea>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: 'AddForm',
        data() {
            return {
                formData: {

                },
                defaultFormData: {
                    id: '',
                    type: '选择类型',
                    date: '',
                    amount: '',
                    resume: '',
                    description: '',
                },
                warningNull: {
                    type: false,
                    date: false,
                    amount: false,
                    resume: false,
                },
                verifyNullList: ['type', 'date', 'amount', 'resume'],
            }
        },
        props: {
            showAddBillForm: {
                type: Boolean,
                default: false,
            },
        },
        methods: {
            resetForm() {
                // 重置表单
                this.formData = { ...this.defaultFormData };
            },
            addBill() {
                // 验证表单
                this.verifyNullList.forEach(key => {
                    if (this.formData[key] === this.defaultFormData[key]) {
                        this.warningNull[key] = true;
                        return;
                    } else {
                        this.warningNull[key] = false;
                    }
                })

                if (this.isveritySuccess) {
                    // 提交表单
                    this.$axios.post('/data/addBill', this.formData)
                        .then(response => {
                            console.log(response.data)
                            this.formData.id = response.data.id
                            this.$emit('addBillSuccess', { ...this.formData })
                            this.resetForm()
                        })
                        .catch(error => {
                            console.log(error)
                            this.resetForm()
                        })
                }
            }
        },
        created() {
            this.resetForm();
            this.formData.date = new Date().toISOString().split('T')[0];
        },
        computed: {
            isveritySuccess() {
                return Object.values(this.warningNull).every(value => value === false);
            }

        },
        watch: {

        }
    }
</script>

<style scoped>
    .addBillFormBox {
        overflow: hidden;
    }
</style>